<template>
  <!-- <div class="custom_box" :style="'height:' + data.height + 'px'">
    <div
      class="cue-check-item "
      v-for="(item, i) in data.checklist"
      @click="changeitem(i)"
      :style="'left: ' + item.x + '%; top: ' + item.y + '%; width:' + item.width + '%; height: ' + item.height + '%;'"
    >
      <div class="item-box"><img v-if="item.img" :src="item.img" /></div>
    </div>
  </div> -->

  <div class="cube" >
    <div class="container" :style="'padding:'+data.padding.top/2+'px '+data.padding.lr/2+'px '+data.padding.bottom/2+'px '+data.padding.lr/2+'px ' ">
      <div class="custom-box" :style="'margin:-'+data.padding.between/4+'px;height:' + data.height + 'px;border-radius:' + data.r_t / 2 + 'px ' + data.r_t / 2 + 'px ' + data.r_b / 2 + 'px ' + data.r_b / 2 + 'px '"
      >
        <div class="custom-img-box"
          v-for="(item, i) in data.checklist"
         :style="'padding:'+data.padding.between/4+'px;left: ' + item.x + '%; top: ' + item.y + '%; width:' + item.width + '%; height: ' + item.height + '%;'"
         >
          <vimage v-if="item.img" :src="item.img" mode="aspectFill" class="custom-img"  :style="itemstyle"></vimage>
          <img v-else class="custom-img" src="@/assets/images/cubebg.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed:{
    itemstyle() {
      return "border-radius:" + this.data.r_t / 2 + "px " + this.data.r_t / 2 + "px " +
        this.data.r_b / 2 + "px " + this.data.r_b / 2 + "px "
    },
  }

};
</script>

<style lang="scss" scoped>
.cube {
  .container {
    overflow: hidden;
    .custom-box{
        position: relative;
        overflow: hidden;
        .custom-img-box {
            position: absolute;
            .custom-img{
                border-radius: 6px;
                -o-object-fit: cover;
                object-fit: cover;
                height: 100%;
                width: 100%;
            }
        }
    }
  }
}
</style>
